實驗：使用 Amazon S3建立靜態網站

目錄

• 啟動學習者實驗室Learner Lab
• 新建 AWS Cloud9 實例
• 連接到 AWS Cloud9 IDE 並配置環境
• 使用 AWS CLI 建立 S3 儲存貯體
• 使用Python SDK為儲存貯體設定儲存貯體策略
• 將物件上傳到儲存貯體以建立網站
• 測試網站的訪問
• 參考資料

以下實驗是使用 Amazon S3 來建立靜態網站

啟動學習者實驗室(Learner Lab)

AWS Academy Learner Lab 是提供一個帳號讓學生可以自行使用 AWS 的服務，讓學生可以在 50 USD的金額下，自行練習所要使用的 AWS 服務，在此先介紹一下 Learner Lab 基本操作與限制。
在 AWS Academy 學習平台 的入口首頁 https://www.awsacademy.com/LMS_Login ，選擇以學生 (Students) 身分登錄，在課程選單中選擇 AWS Academy Learner Lab - Foundation Services 的課程，在課程選單中選擇 單元 (Module)，接著單擊 啟動 AWS Academy Learner Lab，如下圖所示。

圖 1. 啟動 AWS Academy Learner Lab

進入 Learner Lab 中，說明一下每個區塊，圖形在下方。

1. 用來啓動 AWS 管理控制台介面，必須是出現綠點才可以點擊，而出現綠點必須要先啓動實驗 (Start Lab)
2. 已用金額與全部實驗金額 (Used $0.2 of $50)。
3. 工具列說明：
   • 『Start Lab』：開始實驗帳號，這時候就可以使用 AWS 資源。
   • 『End Lab』：就會停止計費，並把所有的 AWS 資源關閉，注意，這只是暫停這些資源，並不會回收。
   • 『AWS Details』：使用者(IAM 用戶)相關的密鑰資料可以從來取得。
   • 『Readme』：說明手冊，就是下方的 5.。
   • 『Reset』：就會把目前所有的 AWS 設定好的資源都清除掉。
4. 切換說明的語系，ZH-CN 是簡體中文。
5. 說明手冊。

圖 2. Learner Lab 畫面說明

新建 AWS Cloud9 實例

在開始使用 Learner Lab 前，在說明手冊中有詳細的說明，這邊比較需要注意的是 Learner Lab 的使用限制

• 區域限制：原則上，所有服務訪問僅限於 us-east-1 和 us-west-2 區域
• 角色限制：IAM 的的限制很大，所以大多數的服務盡可能使用 LabRole 這個角色來操作。
• 金額限制：50 美金。
• AWS Cloud9：此服務可代入 LabRole IAM 角色。支持的實例類型：nano、micro、small、medium、large 和 c4.xlarge。提示：使用 New EC2 instance（新建 EC2 實例）環境類型創建新的 Cloud9 實例時，請在 Network settings（網絡設置）中，選擇Secure Shell (SSH)。
• Amazon Simple Storage Service (S3)：此服務可代入 LabRole IAM 角色。

圖 3. 使用 AWS Cloud9 限制

圖 4. 新建 AWS Cloud9 環境

在配置 AWS Cloud9 環境時，在 Connection 選項中選擇 Secure Shell (SSH)。

圖 5. 配置 AWS Cloud9 環境

在完成 AWS Cloud9 環境建置後，點選 Open 連接到 cloud9 的環境。

圖 6. 完成 AWS Cloud9 環境建置

連接到 AWS Cloud9 IDE 並配置環境

AWS Cloud9 IDE 畫面與 VS Code 畫面相似，左手邊是功能視窗，可以檢視檔案與其他功能；，右上方是檔案編輯畫面，可以進行檔案編輯，撰寫程式進行 AWS SDK 操作；右下方則是終端命令列介面，可以輸入指令，進行 AWS CLI 操作。

圖 7. AWS Cloud9 IDE

在下方的終端輸入以下指令，取得實驗所需要的資源，可以在左上角看到已下載的檔案。

git clone https://github.com/yehchitsai/AIoTnAWSCloud

圖 8. 取得實驗所需要的資源

檢查 Cloud9 開發環境的套件版本

使用 AWS CLI 建立 S3 儲存貯體

輸入以下 AWS CLI 指令，用來建立 S3 儲存貯體，將 BUCKET_NAME 改為自己所要建立的 S3 儲存貯體名稱。
aws s3api create-bucket --bucket BUCKET_NAME

AWS CLI 說明指令：
aws [options] <command> <subcommand> [parameters]

• aws：呼叫 AWS CLI，這需要安裝 AWS Command Line Interface (AWS CLI)工具才能夠使用，而 AWS cloud 9 環境已經事先安裝好，所以開發者可以不用安裝。
• s3api：對應到 AWS CLI 語法中的 command，內容是 AWS 的資源，s3api就是指 S3 的資源。
• create-bucket：對應到 AWS CLI 語法中的 subcommand，內容是對 command 中的資源進行何種操作，這裡是建立 S3 儲存貯體。
• --bucket aiotnawscloud0821：對應到 AWS CLI 語法中的 parameters，內容是S3 儲存貯體的名稱命名為 aiotnawscloud0821 。

而回傳值是建立儲存貯體的名稱。

圖 9. 使用 AWS CLI 指令建立 S3 儲存貯體

注意：儲存貯體的名稱是全球唯一的，所以每個人都要取不同的名稱。

注意：這裡存在一個很重要的問題，那就是授權，為何輸入這樣的指令，就可以建立一個儲存貯體在自己的帳號內， AWS CLI 是如何辨識目前的使用者？這是因為aws cli 事先已經執行 aws configure 指令將個人 token 儲存在 cloud9 的個人目錄中，可以輸入以下指令來觀看目前的 aws_access_key_id/aws_secret_access_key/region 。

more ~/.aws/credentials

圖 10. 檢視個人密鑰

使用Python SDK為儲存貯體設定儲存貯體策略

打開 s3_security_policy.json 檔案，將 BUCKET_NAME 改成自己所建立的儲存貯體的名稱，MY_PUBLIC_IP 則是要上網查找自己電腦的公開ip，這可能會跟自己電腦上所設定的ip不同，因為大多數情況，上網都是多人共用一個公開ip，如下圖所示。

圖 11. 查找自己電腦的公開ip

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME/*",
                "arn:aws:s3:::BUCKET_NAME"
            ],
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "MY_PUBLIC_IP/32"
                }
            }
        }
    ]
}

修改完畢後，接著修改 permissions.py 的 BUCKET_NAME 自己所建立的儲存貯體的名稱，接著執行，就可以在新的儲存貯體上設定政策，讓自己的電腦可以用靜態網站的方式使用 S3。

import boto3
import json
import pathlib

s3_client = boto3.client("s3", region_name="us-east-1")
bucket_name = "BUCKET_NAME"
current_path = str(pathlib.Path(__file__).parent.resolve())
policy_file = open(current_path + "/dataset/s3_security_policy.json", "r")


s3_client.put_bucket_policy(
    Bucket = bucket_name,
    Policy = policy_file.read()
)

圖 12. 使用 Python SDK 為儲存貯體設定儲存貯體策略

接著可以到 S3 控制台，檢視 S3 儲存貯體策略。

圖 13. 檢視 S3 儲存貯體策略

將物件上傳到儲存貯體以建立網站

將物件上傳到儲存貯體以建立網站，將 BUCKET_NAME 改為自己建立的 S3 儲存貯體名稱。

aws s3 cp AIoTnAWSCloud/lab/website s3://BUCKET_NAME/ --recursive --cache-control "max-age=0"

圖 14. 物件上傳到儲存貯體

測試網站的訪問

在 S3 儲存貯體中到找到首頁 index.html ，點選後在屬性頁籤找到物件 URL，複製起來打開一個空白網頁。

圖 15. 取得首頁的進入網址

貼上網址後，就可以檢視網頁成果。

圖 16. 檢視網頁

參考資料

• AWS Command Line Interface, https://aws.amazon.com/tw/cli/
• AWS Academy, https://aws.amazon.com/cn/training/awsacademy/
• AWS Academy 簡介， https://blog.csdn.net/m0_50614038/article/details/123778237
• AWS Academy LMS (Learning Management System) 基礎 – 教師, https://blog.csdn.net/m0_50614038/article/details/123778561
• AWS Academy LMS 申請開課 － 教師, https://blog.csdn.net/m0_50614038/article/details/123778838
• AWS Academy LMS 新增學生 － 教師, https://blog.csdn.net/m0_50614038/article/details/123779068